<template>
	<view>
		<!-- u-view的组件不支持Http，所以自己封装一个原生的uni-app的swiper组件 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
				:duration="500">
				<swiper-item v-for="(item,index) in list" @click="clickItem(index)">
						<image class="swiper-img" :src="item" alt="">
				</swiper-item>
			</swiper>
			<fui-dialog :show="showImageDialog" title="提示" :content="content" :maskClosable="true" @click="delImg" @close="cancel()"></fui-dialog>
		</view>
	</view>
</template>

<script>
	export default {
		name:"mySwiper",
		props:['list'],
		data() {
			return {
				content:"是否删除图片?",
				showImageDialog:false,
				index:0
			};
		},
		mounted() {
			console.log(this.list);
		},
		methods:{
			clickItem(data){
				this.showImageDialog=true;
				this.index=data;
			},
			cancel() {
				this.showImageDialog = false
			},
			delImg(e){
				//确认按钮
				if (e.index) {
					this.$utils.msg("删除成功!")
					this.showImageDialog = false
					this.$emit("OK",this.index);
				} else {
					// 取消按钮
					this.$utils.msg("取消删除")
					this.showImageDialog = false;
					this.$emit("cancel","");
				}
			}
		}
	}
</script>

<style>

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 400rpx;
	}
	.swiper-item {
		
	}.swiper-item image{
		height: 100%;
		width: 100%;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}

	.swiper-img{
		height: 100%;
		width: 100%;
	}
</style>